import { ReactNode } from 'react';
import styles from './index.less';
import classNames from 'classnames';

interface Childrens {
  operator: ReactNode;
  viewer: {
    main: ReactNode;
    info: { base: ReactNode; holeAndGroove: ReactNode; legend: ReactNode };
  };
  renderViewer(viewer: ReactNode): ReactNode;
}

export function PageContainer(props: Childrens) {
  const { operator, viewer, renderViewer } = props;

  return (
    <div className={styles.container}>
      <div className={styles.operator}>{operator}</div>
      {renderViewer(
        <div className={styles.viewer}>
          <div className={classNames(styles.info, styles['info--left'])}>
            {viewer.info.base}
          </div>
          <div className={classNames(styles.info)}>
            {viewer.info.holeAndGroove}
          </div>
          <div className={classNames(styles.info, styles.legend)}>
            {viewer.info.legend}
          </div>
          {viewer.main}
        </div>,
      )}
    </div>
  );
}
